<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>_库区占用率</title>
    
	
	<script type="text/javascript">
		var tables_occupiedAreaConfig = null;
		$(function(){
			$("#startTime").datepicker({ format:'yyyy-mm-dd'});
			 $("#endTime").datepicker({ format:'yyyy-mm-dd'});
			 $("#re_startTime").datepicker({ format:'yyyy-mm-dd'});
			 $("#re_endTime").datepicker({ format:'yyyy-mm-dd'});
			//初始化dataTables-plan
	        tables_occupiedAreaConfig=$("#table_occupiedAreaResult").dataTable({
	           "bServerSide":true,
	           "sAjaxSource":'${ctx}/occupiedAreaConfig/findOccupiedAreaReslult',
	           "fnServerData": retrieveData_occupiedAreaConfig,
	           "bFilter": false,
	           "bSort": false,
	           "sZeroRecords": "查询无记录！",
	           "bProcessing": true,
	           "oLanguage": {
	               "sUrl": '${ctx}/static/v2/js/plugins/datatables/cn.txt'
	            },
	            "aoColumns": [
					{"mData": 'customerCode'},
					{"mData": 'warehouseCode'},
// 					{"mData": 'skuNum',"fnRender": function (obj) {
//                         var display="每 "+obj.aData.skuNum+"件SKU 占用面积 "+obj.aData.occupiedArea +" ㎡";
//                         return display;
//                      }},
// 					{"mData": 'assignArea'},
// 					{"mData": 'overPrice'},
// 					{"mData": 'currentSkuNum'},
					{"mData": 'overArea'},
					{"mData": 'overTotalPrice'},
					{"mData": 'totalCost'}
// 					,
// 					{"mData": 'createTime',"fnRender": function (obj) {
//                         var time=obj.aData.createTime.time;
//                         var date = new Date(time);
//                         return date.Format("yyyy-MM-dd");
//                      }}
	           ]
	        });
		});
		function retrieveData_occupiedAreaConfig(sSource, aoData, fnCallback){
			//查询参数
		   var customerCode=$("#customerCode").val();
		   aoData.push( { "name": "customerCode", "value": customerCode } );  
		    
		   var warehouseCode=$("#warehouseCode").val();
		   aoData.push( { "name": "warehouseCode", "value": warehouseCode } );
		   
		   var startTime=$("#startTime").val();
		   aoData.push( { "name": "startTime", "value": startTime } );
		   
		   var endTime=$("#endTime").val();
		   aoData.push( { "name": "endTime", "value": endTime } );
		   
		   
		   $.ajax({ 
		       "type": "post",
		       "contentType": "application/json", 
		       "url": sSource,    
		       "dataType": "json",   
		       "data": JSON.stringify(aoData),
		       "success": function(resp) {  
	       			fnCallback(resp);
	       		}
		   }); 
		}
		
		function query() {
			tables_occupiedAreaConfig.fnDraw();
		}
		
		function exportResult() {
     	   var customerCode=$("#customerCode").val();
		   var warehouseCode=$("#warehouseCode").val();
		   var startTime=$("#startTime").val();
		   var endTime=$("#endTime").val();
			
			var url = "${ctx}/occupiedAreaConfig/exportOccupiedAreaReslult?customerCode="+customerCode+"&warehouseCode="+warehouseCode+"&startTime="+startTime+"&endTime="+endTime;
			if($('#downloadcsv').length<=0){
			  $('body').append("<iframe id=\"downloadcsv\" style=\"display:none\"></iframe>");
			}
			 $('#downloadcsv').attr('src',url);
		}
		function startRecount() {
			var customerCode=$("#re_customerCode").val();
		   var warehouseCode=$("#re_warehouseCode").val();
		   var startTime=$("#re_startTime").val();
		   var endTime=$("#re_endTime").val();
		   $.ajax({
				type:'post',
				url:'${ctx}/occupiedAreaConfig/createRecountPlan',
				data:{
					customerCode:customerCode,
					warehouseCode:warehouseCode,
					startTime:startTime,
					endTime:endTime
					
				},
				dataType:'json',
				success:function(data) {
					var msg=data.msg;
					if(msg=='success'){
						jAlert("创建成功",'温馨提示',function(){
							openRecount();
						});
					}else{
						jAlert(data.content);
					}
				},
				error:function() {
					jAlert("网络繁忙，请稍后重试...");
				}
	       });
		}
		function openRecount(){
			var recountButton = $("#recountButton");
// 			recountButton.attr({"disabled":"disabled"});;
			var tbodyRecountList = $("#tbodyRecountList");
			
			$.ajax({
				type:'post',
				url:'${ctx}/occupiedAreaConfig/queryRecountPlan',
				data:{
				},
				dataType:'json',
				success:function(data) {
					var msg=data.msg;
					if(msg=='success'){
						var orpList = data.orpList;
						if(orpList==null||orpList.length==0){
							tbodyRecountList.html("");
						}else {
							var finishAll = true;
							var str = "";
							for(var i = 0 ; i < orpList.length ; i++){
								var orp = orpList[i];
								str += "<tr>";
								str += "<td>"+orp.warehouseCode+"</td>";
								str += "<td>"+orp.customerCode+"</td>";
								str += "<td>"+orp.startTime+"</td>";
								str += "<td>"+orp.endTime+"</td>";
								str += "<td><font color='red'>"+orp.progress+" %</font></td>";
								str += "<td>"+orp.status+"</td>";
								str += "<td>"+orp.recountPerson+"</td>";
								str += "<td>"+orp.createTimeStr+"</td>";
								str += "<td>"+orp.finishTimeStr+"</td>";
								str+="</tr>";
								if(orp.status!='finish'){
									if(finishAll){
										finishAll = false;
									}
								}
							}
							tbodyRecountList.html("");
							tbodyRecountList.append(str);
							if(finishAll){
// 								recountButton.removeAttr("disabled");
							}else {
								timer = setTimeout(openRecount,3000);
							}
						}
						
					}else{
						jAlert(data.content);
					}
				},
				error:function() {
					jAlert("网络繁忙，请稍后重试...");
				}
	       });
		}
		
    </script>
</head>

<body>
<div id="fullbg"></div>
<div id="dialog">
	<div>
		<img src="${ctx}/static/022.gif"></img>
	</div>
</div>
<section class="content">
    <!-- 查询条件  start-->
   	<div class="row">
	<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary" >
			    
				<div class="box-header">
					<i class="fa fa-search"></i>
					<h3 class="box-title">搜索栏</h3>
				</div>
				
				<div class="box-body">
				    <form class="form-search" id="queryForm" method="post" action="" style="margin-top: 10px;">
					    <!-- 第一行 -->
						<div class="form-group row">
							<div class="col-sm-3">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 商家名称： </span> 
									<select class="form-control" id="customerCode" name="customerCode" onchange="ajaxAreaGroup(this,'warehouseCode')">
										<option value=""></option>
										<c:forEach items="${customerList}" var="customer">
											<option value="${customer.customerCode}"
												<c:if test="${customerCode eq customer.customerCode}">selected=selected</c:if>>${customer.customerName}</option>
										</c:forEach>
									</select>
								</div>
							</div>
							
							<div class="col-sm-3">
								<div class="input-group col-sm-12">
									<span class="input-group-text"> 仓库： </span> 
									<select class="form-control" id="warehouseCode" name="warehouseCode" >
										<option value=""></option>
										<c:forEach items="${warehouseList}" var="warehouse">
											<option value="${warehouse.groupCode}"
												<c:if test="${warehouseCode eq warehouse.groupCode}">selected=selected</c:if>>${warehouse.groupName}</option>
										</c:forEach>
									</select>
								</div>
							</div>
							
							<div class="col-sm-3">
									<div class="input-group col-sm-12">
										<span class="input-group-text"> &nbsp;结算时间: </span> 
										<input type="text" name="startTime" id="startTime"  value="${param.startTime}" class="form-control required" > 
									</div>
								</div>
								
								<div class="col-sm-3">
									<div class="input-group col-sm-12">
										<span class="input-group-text"> 至: </span> 
										<input type="text" name="endTime" id="endTime"  value="${param.endTime}" class="form-control required">
									</div>
								</div>
								<script type="text/javascript">
								
								Date.prototype.Format = function (fmt) { //author: meizz 
								    var o = {
								        "M+": this.getMonth() + 1, //月份 
								        "d+": this.getDate(), //日 
								        "h+": this.getHours(), //小时 
								        "m+": this.getMinutes(), //分 
								        "s+": this.getSeconds(), //秒 
								        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
								        "S": this.getMilliseconds() //毫秒 
								    };
								    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
								    for (var k in o)
								    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
								    return fmt;
								}
								<c:if test="${empty param.startTime}">
									$("#startTime").val(new Date().Format("yyyy-MM-dd"));
								</c:if>
								<c:if test="${empty param.endTime}">
								$("#endTime").val(new Date().Format("yyyy-MM-dd"));
								</c:if>
								</script>
							
						</div>
						<div class="form-group row">
							<div class="col-sm-6">
								<button class="btn btn-info" type="button" onclick="query();">搜索</button>
								<button class="btn btn-info" type="button" onclick="exportResult();">导出清单</button>
								<a href="#recountWindow" onclick="openRecount()" role="button"  class="btn btn-primary" data-toggle="modal">重算计划</a>
							</div>
						</div>
					</form>
				</div>

			</div>

	 </div>
	</div>
    <!-- 查询条件 end -->
    
    <!-- 查询结果 start -->
	<div class="form-group row" >
		<div class="col-md-12">
	       <div class="box box-primary">
				 <div class="box-header"></div>
				 <div class="box-body table-responsive">
				     <table id="table_occupiedAreaResult" class="table table-bordered table-striped">
				         <thead>
				             <tr>
				                <th style="width: 80px;">商家编码</th>
							    <th style="width: 80px;">仓库编码</th>	
<!-- 							    <th style="width: 140px;">SKU数量/占用面积</th> -->
<!-- 							    <th style="width: 60px;">分配商家总面积</th> -->
<!-- 							    <th style="width: 60px;">超出每平方单价</th> -->
<!-- 							    <th style="width: 60px;">sku总数</th> -->
<!-- 							    <th style="width: 60px;">分配面积利用率</th> -->
								<th style="width: 60px;">超出总面积</th>
							    <th style="width: 60px;">超出总金额</th>
							    <th style="width: 60px;">库位总成本</th>
<!-- 								<th style="width: 60px;">创建时间</th> -->
				             </tr>
				         </thead>
				     </table>
				 </div>
			 </div>
		
		</div>
	</div>
	
	
	
	
	<div class="modal fade"
			tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true" style="height:1400px;" id="recountWindow">
			<div  style="width:800px;" class="modal-dialog">
			<div class="modal-content" style="width:3500;">
			<div class="modal-header">
				<h3 id="myModalLabel">
					重算计划
				</h3>
			</div>
			<div class="modal-body" style="height:400px; overflow: auto;">
				<form class="form-search" id="exportForm" method="post" action="${ctx}/occupiedAreaConfig/findOccupiedAreaConfig" style="margin-top: 10px;">
					   <div class="form-group row">
						   	<table class="table table-bordered table-striped">
						   		<thead>
							   		<tr>
								   		<th style="width: 80px;">商家</th>
								   		<th style="width: 80px;">仓库</th>
								   		<th style="width: 80px;">开始时间</th>
								   		<th style="width: 80px;">结束时间</th>
								   		<th style="width: 180px;">进度</th>
								   		<th style="width: 80px;">状态</th>
								   		<th style="width: 80px;">创建人</th>
								   		<th style="width: 80px;">创建时间</th>
								   		<th style="width: 80px;">完成时间</th>
							   		</tr>
							   	</thead>
							   	<tbody id="tbodyRecountList">
							   		
							   	</tbody>
						   	</table>
					   </div>
							<div class="form-group row">
								<div class="col-sm-8">
									<div class="input-group col-sm-12">
										<span class="input-group-text"> 商家名称： </span> 
										<select class="form-control" id="re_customerCode" name="customerCode" onchange="ajaxAreaGroup(this,'re_warehouseCode')">
											<option value=""></option>
											<c:forEach items="${customerList}" var="customer">
												<option value="${customer.customerCode}"
													<c:if test="${customerCode eq customer.customerCode}">selected=selected</c:if>>${customer.customerName}</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-sm-8">
									<div class="input-group col-sm-12">
										<span class="input-group-text"> 仓库： </span> 
										<select class="form-control" id="re_warehouseCode" name="warehouseCode" >
											<option value=""></option>
											<c:forEach items="${warehouseList}" var="warehouse">
												<option value="${warehouse.groupCode}"
													<c:if test="${warehouseCode eq warehouse.groupCode}">selected=selected</c:if>>${warehouse.groupName}</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-sm-8">
										<div class="input-group col-sm-12">
											<span class="input-group-text"> &nbsp;开始时间: </span> 
											<input type="text" name="startTime" id="re_startTime"  value="${param.startTime}" class="form-control required" > 
										</div>
									</div>
							</div>
							<div class="form-group row">		
									<div class="col-sm-8">
										<div class="input-group col-sm-12">
											<span class="input-group-text"> 结束时间: </span> 
											<input type="text" name="endTime" id="re_endTime"  value="${param.endTime}" class="form-control required">
										</div>
									</div>
									<script type="text/javascript">
// 										<c:if test="${empty param.startTime}">
// 											$("#re_startTime").val(new Date().Format("yyyy-MM-dd"));
// 										</c:if>
// 										<c:if test="${empty param.endTime}">
// 											$("#re_endTime").val(new Date().Format("yyyy-MM-dd"));
// 										</c:if>
									</script>
								
							</div>
					</form>
			</div>
			<div class="modal-footer">
				<a href="#" onclick="startRecount()" id="recountButton"role="button"  class="btn btn-primary" data-toggle="modal">
					开始计算
				</a>
				<button class="btn" id="closeId" data-dismiss="modal" aria-hidden="true">
					关闭
				</button>
			</div>
		</div>
		</div>
	</div>
	
	
	
</section>     
</body>
</html>
